<template>
  <el-dialog
    :class="[
      'yi-dialog',
      {
        'yi-dialog-fullscreen-h': fullscreen,
        'yi-dialog-fullscreen': dialogFullscreen,
      },
    ]"
    ref="dialog"
    v-bind="$attrs"
    v-on="$listeners"
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    append-to-body
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    destroy-on-close
    center
    :width="width"
    :fullscreen="dialogFullscreen"
    size="small"
  >
    <span class="el-dialog__title" slot="title">
      {{ $attrs.title }}
      <!-- <slot name="titleIcon"></slot> -->
      <i
        v-if="fullscreen"
        class="el-icon-full-screen el-dialog__headerbtn"
        @click.stop="fullScreen()"
      ></i>
    </span>
    <div v-loading="dialogLoading">
      <slot></slot>
    </div>
    <span v-if="isHandle" slot="footer" class="dialog-footer">
      <slot name="more"></slot>
      <el-button
        v-if="isConfirm"
        type="primary"
        icon="el-icon-document-add"
        @click="handleConfirm()"
        size="small"
        >{{ confirmText }}</el-button
      >
      <el-button
        v-if="isCancel"
        @click.stop="handleCancel()"
        icon="el-icon-document-remove"
        size="small"
        >{{ cancelText }}</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: "YiDialog",
  inheritAttrs: false,
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    width: {
      type: String,
      default: "660px",
    },
    loading: {
      type: Boolean,
      default: false,
    },
    isHandle: {
      type: Boolean,
      default: false,
    },
    isConfirm: {
      type: Boolean,
      default: true,
    },
    isCancel: {
      type: Boolean,
      default: true,
    },
    confirmText: {
      type: String,
      default: "确定",
    },
    cancelText: {
      type: String,
      default: "取消",
    },
    reconfirm: {
      // 是否需要确认弹框进行二次确认
      type: Boolean,
      default: false,
    },
    reconfirmText: {
      // 二次确认的文字内容
      type: String,
      default: "是否确认要提交内容？",
    },
    fullscreen: {
      // 是否有全屏功能
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      dialogFullscreen: false, // 全屏功能
    };
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      },
    },
    dialogLoading: {
      get() {
        return this.loading;
      },
      set(val) {
        this.$emit("update:loading", val);
      },
    },
  },
  methods: {
    handleClose() {
      this.handleCancel();
    },
    handleCancel() {
      if (this.fullscreen) this.dialogFullscreen = false;
      this.$emit("cancel");
      this.dialogVisible = false;
    },
    handleConfirm() {
      if (this.reconfirm) this.confirm();
      else this.$emit("confirm");
    },
    confirm() {
      // 确认消息
      this.$confirm(`${this.reconfirmText}`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$emit("confirm");
        })
        .catch(() => {});
    },
    fullScreen() {
      // 全屏功能
      this.dialogFullscreen = !this.dialogFullscreen;
    },
  },
};
</script>

<style>
.yi-dialog .el-dialog__header {
  border-bottom: 1px solid #efefef;
  padding: 10px;
  text-align: left;
}
.yi-dialog .el-dialog__title {
  font-size: 16px;
  padding-left: 5px;
}
.yi-dialog .el-dialog__headerbtn {
  top: 11px;
}
.yi-dialog .el-dialog__footer {
  text-align: right;
  padding: 15px 20px;
  border-top: 1px solid #efefef;
}
.yi-dialog .el-dialog__body {
  padding: 15px;
  max-height: 520px;
  overflow-y: auto;
}
.yi-dialog.yi-dialog-fullscreen-h .el-dialog__body {
  max-height: initial;
  height: 600px;
}
.yi-dialog.yi-dialog-fullscreen .el-dialog__body {
  height: calc(100% - 45px);
}
.yi-dialog .el-dialog__body > div {
  height: 100%;
  position: relative;
}
.yi-dialog .el-icon-full-screen {
  /* right: 40px;
        color: #999999;
        font-size: 14px;
        top: 13px; */
  right: 53px;
  color: #fff;
  font-size: 14px;
  top: 26px;
}
.yi-dialog .el-icon-full-screen:hover {
  /* color: #1890ff; */
  color: #00508A;
  
}
.yi-dialog .el-form-item__label {
  font-size: 13px;
}
.yi-dialog .more {
  display: inline-block;
  margin-right: 10px;
}
</style>